<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    .box {
        width: 600px;
        height: 400px;
        background: bisque;
        margin: auto;
    }

    input {
        width: 300px;
        height: 40px;
        font-size: 24px;
        margin-bottom: 20px;
    }

    button {
        width: 100px;
        height: 40px;
    }

    textarea {
        font-size: 22px;
    }
</style>

<body>
    <div class="box">
        <input type="text">
        <!-- <button>提交</button><br> -->
        
        <textarea name="" id="con" cols="30" rows="10"></textarea>
    </div>
</body>
<script>
    // var str = ''
    // var i = ''
    // $('button').click(function(){
    //     var int = $('input').val()
    //     str += `${++i}:${int}\n`
    //     $('textarea').text(str)
    //     $(this).val('')
    // })



    var arr = []
    $(function () {
        arr = JSON.parse(localStorage.getItem('arr')) ?? []
        $('input').on('keyup', function () {
            if (event.keyCode === 13) {
                arr.push($(this).val())
                localStorage.setItem('arr', JSON.stringify(arr))
                $(this).val('')
                showText()
            }

        })
        showText()


    })
    function showText() {
        var str = ''
        for (var i in arr) {
            str += `${+i + 1}.${arr[i]}\n`
        }
        $('#con').val(str)
    }
</script>

</html>